<template>
  <div style="height: 1px; line-height: 1px;">
    <el-row>
      <el-col :span="4">
        <el-input v-model="searchStr" placeholder="搜索"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary">搜索</el-button>
      </el-col>
      <el-col :span="2" :offset="16">
        <el-button type="primary">新增</el-button>
      </el-col>
    </el-row>
    <div style="padding: 2px 0;"/>
    <el-table height="400" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
      <el-table-column prop="departmentName" label="院名称系" width="180">
      </el-table-column>
      <el-table-column prop="name" label="所有专业" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="tableData.length"
        prev-text="上一页"
        next-text="下一页">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import { findAllDepartmentList } from '@/api/manager/department/department'

export default {
  name: 'DepartmentInfo',
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      const _this = this
      findAllDepartmentList().then(result => {
        _this.tableData = result.data.data
      })
    },
    handleEdit (index, row) {
      alert(`${index} ${row}`)
    },
    handleDelete (index, row) {
      alert(`${index} ${row}`)
    },
    handleSizeChange: function (size) {
      this.pagesize = size
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    }

  },
  data () {
    return {
      searchStr: null,
      currentPage: 1,
      pageSize: 5,
      tableData: [
        {
          id: 0,
          name: 'Item 0',
          price: '徐家汇'
        },
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Item 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Item 3',
          price: '徐家汇'
        },
        {
          id: 4,
          name: 'Item 4',
          price: '徐家汇'
        },
        {
          id: 5,
          name: 'Item 5',
          price: '$5'
        },
        {
          id: 6,
          name: 'Item 6',
          price: '$6'
        },
        {
          id: 7,
          name: 'Item 7',
          price: '$7'
        },
        {
          id: 8,
          name: 'Item 8',
          price: '徐家汇'
        },
        {
          id: 9,
          name: 'Item 9',
          price: '$9'
        },
        {
          id: 10,
          name: 'Item 10',
          price: '$10'
        },
        {
          id: 11,
          name: 'Item 11',
          price: '$11'
        },
        {
          id: 12,
          name: 'Item 12',
          price: '徐家汇'
        },
        {
          id: 13,
          name: 'Item 13',
          price: '$13'
        },
        {
          id: 14,
          name: 'Item 14',
          price: '$14'
        },
        {
          id: 15,
          name: 'Item 15',
          price: '$15'
        },
        {
          id: 16,
          name: 'Item 16',
          price: '徐家汇'
        },
        {
          id: 17,
          name: 'Item 17',
          price: '$17'
        },
        {
          id: 18,
          name: 'Item 18',
          price: '$18'
        },
        {
          id: 19,
          name: 'Item 19',
          price: '徐家汇'
        },
        {
          id: 20,
          name: 'Item 20',
          price: '$20'
        }
      ]

    }
  }
}
</script>

<style scoped>

</style>
